import 'package:flutter/material.dart';

import 'package:flutter_base/12_bottomNavigationBar/mine.dart';
import 'package:flutter_base/12_bottomNavigationBar/serch.dart';
import 'package:flutter_base/12_bottomNavigationBar/travel.dart';
import 'package:flutter_base/16_tabbarview_navigatorbar_keepalive/home16.dart';
import 'package:flutter_base/16_tabbarview_navigatorbar_keepalive/keepAliveWrapper.dart';
import 'package:flutter_base/16_tabbarview_navigatorbar_keepalive/news.dart';

class XiaomiNavi extends StatefulWidget {
  const XiaomiNavi({super.key});

  @override
  State<XiaomiNavi> createState() => _XiaomiNaviState();
}

class _XiaomiNaviState extends State<XiaomiNavi> {
  final List<KeepAliveWrapper> pages = const [
    KeepAliveWrapper(
      Home16(),
      key: PageStorageKey('home'),
    ),
    KeepAliveWrapper(Search1(), key: PageStorageKey('search')),
    KeepAliveWrapper(Travel(), key: PageStorageKey('travel')),
    KeepAliveWrapper(Mine1(), key: PageStorageKey('mine')),
    KeepAliveWrapper(News16(), key: PageStorageKey('news')),
  ];
  List<String> titles = ['首页', '搜索', '闲置', '消息', '我的'];
  int _currentIndex = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print('------XiaomiNavi init');
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    print('------XiaomiNavi dispose');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text(titles[_currentIndex]),
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          selectedItemColor: Colors.orange,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
          unselectedItemColor: Colors.grey,
          type: BottomNavigationBarType.fixed,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
            BottomNavigationBarItem(icon: Icon(Icons.more_horiz), label: '闲置'),
            BottomNavigationBarItem(icon: Icon(Icons.margin), label: '消息'),
            BottomNavigationBarItem(
                icon: Icon(Icons.book_outlined), label: '我的'),
          ]),
      body: IndexedStack(
        index: _currentIndex,
        children: pages,
      ),
      // body: pages[_currentIndex],
      floatingActionButton: Container(
        padding: const EdgeInsets.all(5),
        width: 70,
        height: 70,
        decoration: const BoxDecoration(
          color: Colors.black12,
          shape: BoxShape.circle,
        ),
        child: FloatingActionButton(
          backgroundColor: Colors.orange,
          shape: const CircleBorder(),
          onPressed: () {
            setState(() {
              _currentIndex = 2;
            });
          },
          child: const Icon(Icons.add),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

/// 总结一下bottomNavigator的各种使用方法
///
///
///
///
///
/// 声明一下关于keepalive使页面长活的关键，这与在其他页面中不同的是，在tabbarview或者与pageview
/// 中，关键两点：1.KeepAliveWrapper(Search1(), key: PageStorageKey('search')),设置一个key
/// 2.body: IndexedStack(
///         index: _currentIndex,
///         children: pages,
///       ),
///    IndexedStack这个属性
